<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        /*.title {*/
            /*width: 1000px;*/
            /*height: 40px;*/
            /*background-color: pink;*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
        /*}*/

        /*ul {*/
            /*list-style: none;*/
        /*}*/

        /*li {*/
            /*float: left;*/
            /*width: 100px;*/
            /*line-height: 40px;*/
        /*}*/

        /*a {*/
            /*text-decoration: none*/
        /*}*/

        /*.title {*/
            /*position: relative*/
        /*}*/

        /*.titleone {*/
            /*position: absolute;*/
            /*width: 100px;*/
            /*line-height: 40px;*/
            /*background-color: deeppink;*/
            /*display: none;*/
            /*box-shadow: 0px 1px 2px 0px gainsboro}*/
        /*ul a{display: block;text-align: center;color: white}*/
        /*a:hover {*/
            /*color: gainsboro;*/
            /*background: palevioletred*/
        /*}*/

        /*.titletuo:hover .titleone{*/
            /*display: block;*/
        /*}*/
        /*.row:before{*/
            /*display: table;*/
            /*content:''*/
        /*}*/
        /*.row:after{*/
            /*display: table;*/
            /*content:'';*/
            /*clear:both;*/
        /*}*/
        .row:before{
            display: table;
            content:''
        }
        .row:after{
            display: table;
            content:'';
            clear:both;
        }
        .title{width:1000px;height:40px;background:pink;line-height: 40px;margin-left:auto;margin-right:auto}
        ul{list-style: none;}
        a{text-decoration: none}
        li{float:left;width:100px;}
        li.titletuo{position:relative}
        .titleone{position:absolute;width:100px;background-color: deeppink;display:none;box-shadow: 0 1px 2px 0px gainsboro}
        .row a{display:block;text-align: center;color:white}
        a:hover{color:gainsboro;background:palevioletred}
        .titletuo:hover .titleone{
            display: block;
        }

    </style>
</head>
<body>
<div class="title">
    <ul class="row">
        <li class="titletuo">
            <a href="#" class="titletuo" >收藏夹</a>
            <div class="titleone">
                <a href="#">收藏宝贝</a><br/>
                <a href="#">收藏店铺</a><br/>
            </div>
        </li>
        <li><a href="#">卖家中心</a></li>
        <li><a href="#">联系客户</a></li>
    </ul>
</div>
</body>
</html>